<template>
  <div class="administer">
    <div class="administerNav">
      <backHeader></backHeader>
    </div>
    <div class="administerCont">
      <div class="sorting html_pst">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="项目类型">
            <el-input v-model="request.categoryNameLike"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="search(1)">查询</el-button>
          </el-form-item>
        </el-form>
        <div class="add">
          <span @click="showAddModel()">
            <i class="el-icon-circle-plus-outline"></i>添加类型
          </span>
          <el-dialog
            :title="modelTitle"
            :visible.sync="isShowModel"
            width="40%"
            custom-class="addcustom"
             v-dialogDrag
          >
            <div class="addcustom_cont">
              <el-form ref="form" label-width="110px">
                <el-form-item label="项目类型名称" :rules="[{required: true}]">
                  <el-input v-model="form.categoryName"></el-input>
                </el-form-item>
              </el-form>
              <span slot="footer" class="dialog-footer">
                <el-button @click="isShowModel = false">取 消</el-button>

                <el-button type="primary" v-if="modelTitle=='修改项目类型'" @click="editProjectType()">确 定</el-button>
                <el-button type="primary" v-else @click="addProjectType()">确 定</el-button>
              </span>
            </div>
          </el-dialog>
        </div>
        <el-table
          v-loading="loading"
          element-loading-text="加载中..."
          :data="tableData"
          style="width: 99%"
          class="jzsj"
          :max-height="tableHeight"
        >
          <el-table-column type="index" label="序号" width="50"></el-table-column>
          <el-table-column prop="categoryName" label="类型名称"></el-table-column>
          <el-table-column prop="createName" label="创建人"></el-table-column>
          <el-table-column prop="createDate" label="创建时间"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <div class="amend">
                <span @click="showEditModel(scope.row)">修改</span>
                <span @click="deleteProjectType(scope.row.id)">删除</span>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div style="padding:10px;text-align:center">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="request.page"
            :page-sizes="[20, 50, 100, 200]"
            :page-size="request.rows"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalCount"
          ></el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import backHeader from "@/views/common/backHeader.vue";
export default {
  components: {
    backHeader
  },
  data() {
    return {
      tableHeight:200,
      loading: false,
      request: {
        categoryNameLike: "",
        page: 1,
        rows: 20
      },
      isShowModel: false,
      tableData: [],
      totalCount: 0,
      modelTitle: "新增项目类型",
      form: {
        categoryName: ""
      }
    };
  },
  methods: {
    initData() {
      this.search(1);
    },
    search(page) {
      this.loading = true;
      let self = this;
      this.request.page = page;
      this.$http.postObj("/api/categorys/pageJson", this.request, function(
        res
      ) {
        if (res.success) {
          self.tableData = res.data.rows;
          self.totalCount = res.data.total;
        }
        self.loading = false;
      });
    },
    showAddModel() {
      this.isShowModel = true;
      this.modelTitle = "新增项目类型";
      this.form = {
        categoryName: ""
      };
    },
    addProjectType() {
      let self = this;
      if(this.form.categoryName == ''){
        this.$message.error('请输入项目类型名称')
        return false
      }
      this.$http.postObj("/api/categorys", this.form, function(res) {
        if(res.success){
          self.$message({
            message: "添加成功！",
            type: "success"
          });
          self.search(1);
          self.isShowModel = false;
        }else{
          self.$message.error(res.data)
        }
      });
    },
    showEditModel(row) {
      this.modelTitle = "修改项目类型";
      this.form = {
        id: row.id,
        categoryName: row.categoryName
      };
      this.isShowModel = true;
    },
    editProjectType() {
      if(this.form.categoryName == ''){
        this.$message.error('请输入项目类型名称')
        return false
      }
      let self = this;
      this.$http.putObj("/api/categorys", this.form, function(res) {
        if (res.success) {
          self.$message({
            message: "修改成功！",
            type: "success"
          });
          self.search(1);
          self.isShowModel = false;
        }else{
          self.$message.error(res.data)
        }
      });
    },
    deleteProjectType(id) {
      let self = this
      this.$confirm('您确定要删除吗?','提示',{
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning'
      }).then(()=>{
                this.$http.deletePath("/api/categorys/" + id, {}, function(res) {
        if (res.success) {
          self.$message({
            message: "删除成功！",
            type: "success"
          });
        }else{
              self.$message.error(res.data)
            }
        self.search(1);
      });
    }).catch(()=>{});
            
      
    },
    handleCurrentChange(page) {
      this.search(page);
    },
    handleSizeChange(pageSize) {
      this.request.rows = pageSize;
      this.search(1);
    }
  },
  created() {
    this.initData();
  },
   mounted(){
        this.$nextTick(function () {
            this.tableHeight = window.innerHeight - 320;
            
            // 监听窗口大小变化
            let self = this;
            window.onresize = function() {
                self.tableHeight = window.innerHeight - 320
            }
        })
  }
};
</script>
<style rel="stylesheet/scss" lang="scss">
.jzsj .el-table__row{
  td:not(.is-hidden):last-child{
    right:2px;
    }
  }
.sorting {
  .el-form-item {
    .el-button--primary {
      background-color: #5b65a1;
      border-radius: 4px;
      border: none;
    }
  }
  .add {
    margin-bottom: 10px;
    span {
      display: inline-block;
      color: #666666;
      cursor: pointer;
      i {
        color: #5b65a1;
        font-size: 16px;
        margin-right: 5px;
        position: relative;
        top: 1px;
      }
    }
  }
  .amend {
    span {
      cursor: pointer;
      &:first-child {
        color: #0070ed;
        margin-right: 12px;
      }
      &:last-child {
        color: #d80000;
      }
    }
  }
}
.addcustom {
  .el-dialog__header {
    text-align: center;
    span.el-dialog__title {
      font-weight: bold;
    }
  }
  .el-dialog__body {
    padding: 10px 20px 30px;
  }
  .addcustom_cont {
    padding: 1px 10% 20px;
    .el-select {
      width: 100%;
    }
    .dialog-footer {
      width: 100%;
      text-align: center;
      .el-button--primary {
        background-color: #5b65a1;
        border-radius: 4px;
        border: none;
        span {
          color: #fff;
        }
      }
    }
    .el-form-item__label {
      text-align: justify;
      text-align-last: justify;
    }
  }
  .el-dialog__header {
    .el-dialog__headerbtn {
      width: 22px;
      height: 22px;
      background-color: #5b65a1;
      line-height: 24px;
      text-align: center;
      border-radius: 50%;
      i {
        color: #fff;
      }
    }
  }
}
</style>

    